window.addEventListener('load', function() {
    //轮播图
    var focus_slide = document.querySelector('.focus-slide');
    var trigger = document.querySelector('.trigger');
    var focus_client = document.querySelector('.focus-client');
    var items = document.querySelectorAll('.item');
    var range = items[0].offsetWidth;
    var index = num = 0;
    var flag = true;

    function animate(obj, targetLacation, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var step = (targetLacation - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == targetLacation) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15);
    }
    // 克隆第一张图片 放到最后
    var first = items[0].cloneNode(true);
    focus_slide.appendChild(first);
    // 动态生成小圆点
    for (var i = 0; i < focus_slide.children.length - 1; i++) {
        var span = document.createElement('span');
        trigger.appendChild(span);
        span.setAttribute('index', i);
        span.addEventListener('click', function() {
            if (flag) {
                flag = false;
                for (var i = 0; i < focus_slide.children.length - 1; i++) {
                    trigger.children[i].className = '';
                }
                this.className = 'on';
                var index_b = this.getAttribute('index');
                if (index_b == 4) {
                    num = -1;
                } else {
                    num = index_b;
                }
                index = index_b;
                animate(focus_slide, -index_b * range);
                flag = true;
            }
        });
    }
    trigger.children[0].className = 'on';
    //轮播函数体
    function autoPlay_a() {
        if (flag) {
            flag = false;
            index++;
            num++;
            if (index > focus_slide.children.length - 1) {
                index = 0;
                num = -1;
            } else
                animate(focus_slide, -index * range, function() {
                    if (index == focus_slide.children.length - 1) {
                        index = 0;
                        focus_slide.style.left = 0;
                    }
                    flag = true;
                });
            autoPlay_b();
        }
    }

    function autoPlay_b() {
        for (var i = 0; i < focus_slide.children.length - 1; i++) {
            trigger.children[i].className = '';
        }
        trigger.children[num].className = 'on';
        if (num == trigger.children.length - 1) {
            num = -1;
        }
    }
    // 轮播
    var timer = setInterval(autoPlay_a, 3000);
    // 鼠标位于轮播区停止轮播
    focus_client.addEventListener('mouseenter', function() {
        clearInterval(timer);
        timer = null;
    });
    focus_client.addEventListener('mouseleave', function() {
        timer = setInterval(autoPlay_a, 3000);
    });
    // //轮播图
    // var ad_items = document.querySelectorAll('.item');
    // var trigger = document.querySelector('.trigger');
    // var on_items = trigger.children;
    // //轮播图图片与按钮
    // var x = 0,
    //     y = 1;
    // var i;
    // //懒得简化代码了 凑合吧
    // function autotime() {
    //     //排他
    //     for (var z = 0; z < ad_items.length; z++) {
    //         ad_items[z].className = 'item';
    //     }
    //     //修正初始化造成的错位
    //     if (x == 1 || x == 2) {
    //         ad_items[4].className = 'item restore';
    //     }
    //     if (x == 2 || x == 3) {
    //         ad_items[0].className = 'item restore';
    //     }
    //     ad_items[x].className = 'item item-leave';
    //     if (x == 0) {
    //         x = 1;
    //     } else if (x == 1) {
    //         x = 2;
    //     } else if (x == 2) {
    //         x = 3;
    //     } else if (x == 3) {
    //         x = 4;
    //     } else {
    //         x = 0;
    //     }
    //     ad_items[x].className = 'item item-restore';
    //     if (x == 0) {
    //         x = 3;
    //     } else if (x == 1) {
    //         x = 4;
    //     } else if (x == 2) {
    //         x = 0;
    //     } else if (x == 3) {
    //         x = 1;
    //     } else {
    //         x = 2;
    //     }
    //     ad_items[x].className = 'item item-come';
    //     if (x == 0) {
    //         x = 2;
    //     } else if (x == 1) {
    //         x = 3;
    //     } else if (x == 2) {
    //         x = 4;
    //     } else if (x == 3) {
    //         x = 0;
    //     } else {
    //         x = 1;
    //     }
    //     on_items[y].className = 'on';
    //     if (y == 0) {
    //         for (i = 0; i < on_items.length; i++) {
    //             if (i == y) {
    //                 continue;
    //             }
    //             on_items[i].className = '';
    //         }
    //         y = 1;
    //     } else if (y == 1) {
    //         for (i = 0; i < on_items.length; i++) {
    //             if (i == y) {
    //                 continue;
    //             }
    //             on_items[i].className = '';
    //         }
    //         y = 2;
    //     } else if (y == 2) {
    //         for (i = 0; i < on_items.length; i++) {
    //             if (i == y) {
    //                 continue;
    //             }
    //             on_items[i].className = '';
    //         }
    //         y = 3;
    //     } else if (y == 3) {
    //         for (i = 0; i < on_items.length; i++) {
    //             if (i == y) {
    //                 continue;
    //             }
    //             on_items[i].className = '';
    //         }
    //         y = 4;
    //     } else {
    //         for (i = 0; i < on_items.length; i++) {
    //             if (i == y) {
    //                 continue;
    //             }
    //             on_items[i].className = '';
    //         }
    //         y = 0;
    //     }
    // }
    // //延时循环触发
    // setInterval(autotime, [6000]);
    // //按钮点击事件
    // on_items[0].addEventListener('click', function() {
    //     x = 4;
    //     y = 0;
    //     autotime();
    // });
    // on_items[1].addEventListener('click', function() {
    //     x = 0;
    //     y = 1;
    //     autotime();
    // });
    // on_items[2].addEventListener('click', function() {
    //     x = 1;
    //     y = 2;
    //     autotime();
    // });
    // on_items[3].addEventListener('click', function() {
    //     x = 2;
    //     y = 3;
    //     autotime();
    // });
    // on_items[4].addEventListener('click', function() {
    //     x = 3;
    //     y = 4;
    //     autotime();
    // });
})